<template>
    <div class="page-container" @contextmenu.prevent="handleContextMenu">
        <div class="dy-background">
            <Background />
        </div>
        <div class="content">
            <Layout />
        </div>
        <!-- 组件化调用 -->
        <basic-dialog
            v-model:visible="dialogVisible"
            title="更换背景"
            :width="800"
            :centered="true"
            :footer="false"
            :draggable="true"
        >
            <background-candidate :centered="true"></background-candidate>
        </basic-dialog>

        <!-- 右键菜单 -->
        <ContextMenu
            v-model:visible="contextMenuVisible"
            :context-menu-position="contextMenuPosition"
            :menus="contextMenus"
            :type="backgroundType"
            @update:type="updateBackgroundType"
        />
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import {initData} from "@/services/platform-service.ts"
const contextMenuVisible = ref(false)
const contextMenuPosition = ref({ left: 0, top: 0 })
const backgroundType = ref('1')
const dialogVisible = ref(false)

// 右键菜单配置
const contextMenus = ref([
    {
        id: 1,
        type: 'context-menu',
        label: '更换背景',
        icon: 'setting',
        click: () => {
            dialogVisible.value = true
            contextMenuVisible.value = false
        }
    },
    {
        id: 2,
        type: 'context-menu',
        label: '系统设置',
        icon: 'setting',
        click: () => {
            console.log('打开设置')
            contextMenuVisible.value = false
        }
    }
])

// 处理右键事件
const handleContextMenu = (e: MouseEvent) => {
    e.preventDefault()
    contextMenuPosition.value = {
        left: e.clientX,
        top: e.clientY
    }
    contextMenuVisible.value = true
}

// 更新背景类型
const updateBackgroundType = (type: string) => {
    backgroundType.value = type
    console.log('更换背景类型:', type)
    contextMenuVisible.value = false
}

onMounted(async () => {
    await initData()
})
</script>

<style scoped lang="less">
.page-container {
    box-sizing: border-box;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    position: relative;

    .dy-background {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 10;
        width: 100%;
        height: 100vh;
        overflow: hidden;
    }

    .content {
        height: 100vh;
        width: 100vw;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 11;
        overflow: hidden;
    }
}
</style>

